<template>
    <a-form ref="formRef" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="序列号" :rules="rules.no" name="no">
            <a-input v-model:value="form.no" placeholder="请输入序列号" />
        </a-form-item>
        <a-form-item label="设备编号" :rules="rules.code" name="code">
            <a-input v-model:value="form.code" placeholder="请输入设备编号" />
        </a-form-item>
        <a-form-item label="出厂日期" :rules="rules.productionDate" name="productionDate">
            <date-picker v-model:value="form.productionDate" placeholder="请选择出厂日期" />
        </a-form-item>
        <a-form-item label="保质期" :rules="rules.shelfLife" name="shelfLife">
            <a-input-number v-model:value="form.shelfLife" :step="1" :min="1" placeholder="请输入保质期" addon-after="月" />
        </a-form-item>
        <a-form-item label="状态" :rules="rules.status" name="status">
            <dict-select v-model:value="form.status" placeholder="请选择状态" dict-code="devicesStatus" />
        </a-form-item>
    </a-form>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { useForm } from '@iframe/tools/mixins/FormMixins'
import { DatePicker, DictSelect } from '@iframe/tools/components'

const { validate, getForm, setForm } = useForm()
const formRef = ref()
const form = reactive({
    productionDate: null,
    status: null
})
const rules = reactive({
    no: { pattern: /^[a-zA-Z\d]{8}$/, message: '设备序列号只能是8位数字字母组合' },
    code: { required: true, message: '请输入设备编号' },
    productionDate: { required: true, message: '请选择出厂日期' },
    shelfLife: { required: true, message: '请输入保质期' },
    status: { required: true, message: '请选择状态' }
})

defineExpose({ validate: validate(formRef), getForm: getForm(form), setForm: setForm(form) })
</script>
